<h2>Pokemon List</h2>

<div class="text-center">
  <ul class="pagination">
    
      <li *ngIf="h_p_page; else noth_p_page"><a (click)="getPockemons(p_page)"  >&laquo;</a></li>
      <ng-template #noth_p_page>
        <li class="disabled"><a>&laquo;</a></li>
       </ng-template>
      
       <li *ngFor="let p of pages;" id="{{p}}" [className]="p==page ? 'active': ''">
        <a   (click)="getPockemons(p)"  >{{p}}</a>
      </li>
      <li *ngIf="h_l_page; else noth_l_page"><a (click)="getPockemons(l_page)" >&raquo;</a></li>
      <ng-template #noth_l_page>
        <li class="disabled"><a>&raquo;</a></li>
       </ng-template>

      <li>Total Pages:{{toal_page}}</li>
  </ul>
  
</div>


<div class="container">
  <div class="row clearfix">

    <div *ngFor="let pockemon of pockemons">
      <div class="list-group">
        <a routerLink="/pokemon" [queryParams]="{id: pockemon.Id}" class="list-group-item active">{{pockemon.Name}}————{{pockemon.Id}}</a>
        <div class="row clearfix">
          <div class="col-md-4 column">
            Type1:{{pockemon.Type1}}
          </div>
          <div class="col-md-4 column">
            Type2:{{pockemon.Type2}}
          </div>
          <div class="col-md-4 column">
            Abilities: {{pockemon.Abilities}}
          </div>
        </div>
        <div class="row clearfix">
          <div class="col-md-4 column">
            Category: {{pockemon.Category}}
          </div>
          <div class="col-md-4 column">
            Height(ft): {{pockemon.Height_ft}}
          </div>
          <div class="col-md-4 column">
            Height(m): {{pockemon.Height_m}}
          </div>
        </div>
        <div class="row clearfix">
          <div class="col-md-4 column">
            Weight(lbs): {{pockemon.Weight_lbs}}
          </div>
          <div class="col-md-4 column">
            Weight(kg): {{pockemon.Weight_kg}}
          </div>
          <div class="col-md-4 column">
            Capture Rate: {{pockemon.CaptureRate}}
          </div>
        </div>

        <div class="row clearfix">
          <div class="col-md-4 column">
            Egg Steps: {{pockemon.EggSteps}}
          </div>
          <div class="col-md-4 column">
            Exp Group: {{pockemon.ExpGroup}}
          </div>
          <div class="col-md-4 column">
            Total: {{pockemon.Total}}
          </div>
        </div>

        <div class="row clearfix">
          <div class="col-md-4 column">
            HP: {{pockemon.HP}}
          </div>
          <div class="col-md-4 column">
            Attack: {{pockemon.Attack}}
          </div>
          <div class="col-md-4 column">
            Defense: {{pockemon.Defense}}
          </div>
        </div>
        <div class="row clearfix">
          <div class="col-md-4 column">
            SpAttack: {{pockemon.SpAttack}}
          </div>
          <div class="col-md-4 column">
            SpDefense: {{pockemon.SpDefense}}
          </div>
          <div class="col-md-4 column">
            Speed: {{pockemon.Speed}}
          </div>
        </div>
        <hr>

       


      </div>


    </div>
  </div>
</div>

<div class="text-center">
  <ul class="pagination">
    
      <li *ngIf="h_p_page; else noth_p_page"><a (click)="getPockemons(p_page)"  >&laquo;</a></li>
      <ng-template #noth_p_page>
        <li class="disabled"><a>&laquo;</a></li>
       </ng-template>
      
       <li *ngFor="let p of pages;" id="{{p}}" [className]="p==page ? 'active': ''">
        <a   (click)="getPockemons(p)"  >{{p}}</a>
      </li>

      <li *ngIf="h_l_page; else noth_l_page"><a (click)="getPockemons(l_page)" >&raquo;</a></li>
      <ng-template #noth_l_page>
        <li class="disabled"><a>&raquo;</a></li>
       </ng-template>

      <li>Total Pages:{{toal_page}}</li>
  </ul>
  
</div>

